<template>
  <div>
    <!-- 程序下载开始 -->
    <div class="program-download" v-if="$route.path !== '/'">
      <div class="program-download-box">
        <div class="program-text">
          <div>轻松上手，简单好用</div>
          <div>进入检查链接，让一切信息都如此清晰、全面</div>
        </div>
        <div class="rantangle">
            <button type="button" class="btnleft" @click="startCheck">立即体验</button>
            <button type="button" class="btnright" @click="startCheck">></button>
        </div>
      </div>
    </div>
    <!-- 程序下载结束 -->



<!--与我们一起开始-->
    <div class="footer-together" v-if="$route.path === '/'">
      <div class="together">
        <div>
          <div>{{$route.path}}</div>
          <h1>与你一起</h1>
          <div class="point">
            <span>探索体验检查链接</span>
            <span><img src="../../../assets/img/publicity/index_tub/rigth.png" alt="箭头"></span>
          </div>
          <div class="point">
            <span>走进我们，了解检查链接</span>
            <span><img src="../../../assets/img/publicity/index_tub/rigth.png" alt="箭头"></span>
          </div>
          <a href="https://support.qq.com/products/376050?" target ="_blank"><div class="problem">问题反馈</div></a>

        </div>
        <div>
          <img src="../../../assets/img/index-img/bottom_logo_normals.png" alt="img">
        </div>
      </div>
    </div>
<!--与我们一起开始-->

    <!--pc网站底部开始-->
    <div class="footer">
      <div class="footer-introduce">
        <div class="introduce">
          <ul>
            <li>
              <p>关于检查链接</p>
              <p>关于我们</p>
              <p>用户协议</p>
              <p>隐私政策</p>
            </li>
            <li>
              <p>产品介绍</p>
              <p>追踪还原</p>
              <p>网页预览</p>
            </li>
            <li>
              <p>获取帮助</p>
              <p>新手攻略</p>
              <p>常见问题</p>
              <p>使用技巧</p>
            </li>
            <li v-show="$route.path !== '/'">
              <p>联系方式</p>
              <p>客服邮箱：3094132762@qq.com</p>
              <p>商务合作：lj@jqlab.cn</p>
              <a href="https://support.qq.com/products/376050?" target ="_blank">
              <button>问题反馈</button>
              </a>
            </li>
            <li>
            <span>
              <img src="../../../assets/img/publicity/footer/kefu.png" alt="客服微信">
              <p>扫一扫添加客服微信</p>
            </span>
              <span>
              <img src="../../../assets/img/publicity/footer/kefu.png" alt="微信公众号">
              <p>扫一扫添加微信公众号</p>
            </span>
            </li>
          </ul>
        </div>
        <div class="put-msg">
          <p>Copyright©2022 Hefei Qiangzhen Technology Co., LTD. 合肥极强臻科技有限公司版权所有 </p>
          <p>
            <a href="http://beian.miit.gov.cn/" target ="_blank">网站备案号：皖ICP备19022901号-16</a>
            <span>|</span>
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34010402702796" target ="_blank">公安备案：34010402703516号</a>
          </p>
        </div>
      </div>
    </div>
    <!--pc网站底部开始-->
  </div>
</template>

<script setup>
import {useStore} from 'vuex'
import {useRouter} from "vue-router";
const router = useRouter()

const store = useStore()
window.onload = function(){
  let _iframe = document.getElementById('iframe').contentWindow.document.getElementById('license_title')   //get iframe下的id
  _iframe.style.display= "none";  //修改样式
}


const startCheck = ()=>{

  if(!store.state.isLogin) return proxy.$message.error('您未登录或已超时，请先登录后，再进行操作。')
  router.push('/check')
}

</script>

<style lang="less" scoped>
/*程序下载开始*/
.program-download {
  width: 100%;
  display: flex;
  justify-content: center;
  //height: 220px;
  background: #d8d8d8;
  background: linear-gradient(-60deg, transparent 60%, #483CFF 0) top right;

  .program-download-box {
    width: 65%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url(../../../assets/img/publicity/footer/home_bg_xuanchuan.png)no-repeat  100% 10%;
    color: #fff;
    padding: 53px 0;

    div div:nth-child(1) {
      font-size: 24px;
      font-weight: 700;
    }

    div div:nth-child(2) {
      font-weight: 400;
      color: #fff;
      margin: 15px 0;
    }
  }

  /* 斜杆按钮 */

  .rantangle {
    box-sizing: border-box;
    padding: 10px 0;
    width:50%;
  }

  button {
    width: 145px;
    border: 0;
    border-radius: 5px;
    color: #FFF;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .btnleft {
    background-size: 100% 100%;
    background: linear-gradient(-59deg, transparent 21px, #483CFF 0) no-repeat top right;
  }

  .btnright {
    width: 50px !important;
    background-size: 100% 100%;
    background: linear-gradient(120deg, transparent 21px, #ffffff 0) no-repeat top left;
    margin-left: -29px;
    color: #7269ff !important;
    font-weight: 700;
    font-size: 14px;
    box-sizing: border-box;
    padding-left: 17px !important;
  }
}

/*程序下载结束*/

.footer-together{

  padding: 145px 0;
  width: 100%;
  //height: 500px;
  background: #f6f7fb;
  display: flex;
  justify-content: center;
}
.together{
  width: 65%;
  height: 100%;
  display: flex;
  justify-content:space-around;
}
.together div{
  width: 50%;
}
.together h1{
  font-weight: bolder;
}

.together h1::after{
  content: "|";
  background-color: #483CFF;
  margin-left: 90px;
  color: #483CFF;
}

.problem{
  width: 192px !important;
  background: #483CFF;
  text-align: center;
  line-height: 32px;
  cursor:pointer;
  color: #fff;
  margin-top: 30px;

  a{
    color: #fff;
  }
}

.point{
  margin: 30px 0;
  font-weight: bolder;
  font-size:16px;
}

.point img{
  width: 20px;
  vertical-align: sub;
  margin-left: 10px;
}

/*网站底部开始*/
.footer {
  padding: 30px 0;
  width: 100%;
  background: #f6f7fb;
  display: flex;
  justify-content: center;

  .footer-introduce {
    width: 65%;
    height: 100%;

    ul {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding:0px;

      li:nth-child(5){
        padding-top: 51px;
        box-sizing: border-box;
      }

      li:nth-child(5) span {
        display: inline-block;
        margin: 0 10px;
        text-align:center;
      }

      li p {
        margin: 20px 0;
        color: #aaabad;
      }

      li p:nth-child(1) {
        font-size: 16px;
        font-weight: 700;
        color: #333333;
      }


      li button {
        width: 192px;
        height: 32px;
        background: #483CFF;
        color: #FFFFFF;
        border: 0;
        cursor:pointer;

      }

      li img {
        width: 90px;

        text-align: center;
      }
    }

    .put-msg {
      border-top: 1px solid #DFDFDF;
      //margin-top: 30px;

      p {
        text-align: center;
        margin: 10px 0;
        font-weight: 400;
        color: #999999;
      }

      span {
        margin: 0 10px;
      }

      a {
        font-weight: 400;
        color: #999999;
      }
    }
  }
}

/*底部自适应*/
@media screen and (max-width: 1200px) {


  .introduce {
    display: none;
  }

  //.program-text {
  //  display: none;
  //}

  .program-download-box {
    display: flex;
    justify-content: center;
  }

  .program-download .program-download-box{
    background:none;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #483CFF;
    flex-direction: column;
  }

  .program-download .btnleft{
    background:linear-gradient(-59deg, transparent 21px, #fff 0) no-repeat top right;
    color:#FA972D;
    font-weight:700;
  }

  .program-download .rantangle{
    width: 280px
  }

  .program-download .btnright {
    width: 50px !important;
    background-size: 100% 100%;
    background: linear-gradient(120deg, transparent 21px, #FA972D 0) no-repeat top left;
    margin-left: -29px;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    box-sizing: border-box;
    padding-left: 17px !important;
  }


}

@media screen and (max-width: 440px) {
  .footer-together{
    padding:100px 0;
  }

  .together{
    width: 90%;
  }

  .together div{
    width:77%;
  }

  .together div:nth-child(2){
    display:none;
  }

  .program-download{
    display:none;
  }

  .message-have{
    display:block;
  }
}
</style>
